import { Dropdown } from 'antd';
import type { RootState } from '../../../../store';
import { setAssemblySize } from '../../../../store/modules/global'
import { useDispatch, useSelector } from 'react-redux'

const AssemblySize = () => {
  const { assemblySize } = useSelector((state: RootState) => state.global)
  const dispatch = useDispatch()
  const onClick = (e: MenuInfo) => {
    dispatch(setAssemblySize(e.key))
  };

  const items = [
    {
      key: 'middle',
      disabled: assemblySize == 'middle',
      label: <span>默认</span>,
      onClick
    },
    {
      disabled: assemblySize == 'large',
      key: 'large',
      label: <span>大型</span>,
      onClick
    },
    {
      disabled: assemblySize =='small',
      key:'small',
      label: <span>小型</span>,
      onClick
    }
  ]

  return (
    <Dropdown menu={{items}} placement='bottom' trigger={['click']} arrow={true}>
      <i className='iconfont icon-style icon-contentright'></i>
    </Dropdown>
  )
}

export default AssemblySize